<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            border: 1px solid red;
            font-size: 40px;
            /*
            transparent: 默认值，透明
            */
            background-color: skyblue;
            /*背景图片*/
            background-image: url("../img/douyin.jpg");
            /*
            no-repeat: 不重复
            repeat-x:水平方向重复
            repeat-y：垂直方向重复
            */
            background-repeat: repeat-y;
            /*
            控制背景图片的位置，第一种写法
            水平方向： left，center，right
            垂直方向： top，center，bottom
            中间位置： 只有一个center
            left top：左上，默认值
            right top ：右上角
            center top：顶部中间
            中央：center center，默认值，写一个就行
            right：默认右侧中间
            left：默认左侧中间，认为是水平方向
             background-position:center ;
            */
            /*
            第二种写法，使用具体的像素值
             10px 20px：相对左上角x，y坐标
             10px：一个值调整的x轴，y轴默认是中间的位置
            */
            background-position:10px 20px;
            /*复合属性，没有顺序,会覆盖前面的设置*/
            background:url("../img/douyin.jpg") no-repeat 300px red;
        }
    </style>
</head>
<body>
<div>aaaaaa</div>
</body>
</html>